<template>
    <baseView>
        <div class="streetShop">
            <div class="left-box">
                <DataTableV2 :fetchApi="shopList" ref="tableRef" :params="params" :size="[15, 20, 25]"
                    :tableColumn="tableColumn" @getData="onGetData">
                    <!-- 查询 -->
                    <template #search>
                        <div class="form-box">
                            <el-form :inline="true">
                                <el-form-item label="日期">
                                    <el-date-picker v-model="params.date" type="date" :clearable="false" value-format="YYYY-MM-DD" />
                                </el-form-item>
                                <el-form-item label="时间段">
                                    <el-select v-model="params.time" placeholder="请选择" style="width: 100px;">
                                        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="垃圾类型">
                                    <el-select v-model="params.type" placeholder="请选择" style="width: 100px;">
                                        <el-option v-for="item in rubbishOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                               
                                <el-form-item>
                                    <el-button type="primary" @click="goSearch">
                                        <el-icon style="margin-right: 2px;">
                                            <Search />
                                        </el-icon>查询
                                    </el-button>
                                    <!-- <el-button type="primary" plain>重置</el-button> -->
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <!-- 定位 -->
                    <template #position="{ row }">
                        <img class="point-img" :src="point" alt="" @click="toPoint(row)">
                    </template>
                    <!-- 清运状态 -->
                    <template #status="{ row }">
                        <cleanTag :row="row"/>
                    </template>
                </DataTableV2>
            </div>
            <div class="right-box">
                <shopLoc :shopList="tableData" ref="shopLocRef"> </shopLoc>
            </div>
        </div>
    </baseView>
</template>

<script setup>
import point from "@/assets/images/point.png"
import { shopList } from "@/api/cleanStatus"
import dayjs from 'dayjs';
import EventBus from "@/utils/eventBus"
const tableColumn = ref([
    {
        label: '路段名称',
        prop: '路段名',
        width: "300px"
    },
    {
        label: '店铺名',
        prop: '店铺名',
    },
    {
        label: '垃圾类型',
        prop: 'type',
    },
    {
        label: "清运状态",
        prop: 'status',
        slot: true
    },
    {
        label: '定位',
        prop: "position",
        width: '80',
        slot: true
    },
])
const params = reactive({
    pagenum: 1,
    pagesize: 15,
    time: "am",
    type: "dry",
    date: dayjs().format("YYYY-MM-DD")
})
const rubbishOptions = [
    {
        id: 1,
        label: '干垃圾',
        value: "dry"
    },
    {
        id: 2,
        label: '湿垃圾',
        value: "wet"
    },
    {
        id: 3,
        label: '餐厨垃圾',
        value: "food"
    }
]
const timeOptions = [
    {
        id: 1,
        label: '上午',
        value: "am"
    },
    {
        id: 2,
        label: '下午',
        value: "pm"
    }
]
const shopLocRef = ref(null)
const tableRef = ref(null)
function goSearch() {
    tableRef.value.fetchList()
}
function toPoint(item) {
    EventBus.emit('sendInfo', item)
}
const tableData = ref([])
function onGetData(data) {
    tableData.value = data
    shopLocRef.value.addCurrentPoint()
}

</script>
<style scoped>
.el-form--inline .el-form-item {
    margin-right: 15px;
}
</style>
<style lang="scss" scoped>
.form-box {
    display: flex;
    justify-content: flex-end;
}

.streetShop {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left-box,
    .right-box {
        width: 49%;
    }

}

.point-img {
    cursor: pointer;
}


</style>